<template>
  <div class='member-center'>
    <header class='header-con my-header'>
      <router-link to='/setting'><i class='set-up-icon'></i></router-link>
      <router-link to='/MyMessage'><i class='info-icon'></i><span class="newsTips" v-if="noReadMsg.content.allCount > 0"></span></router-link>
    </header>
    <div class='my-page'>
      <div class='my-info'> <!-- 还没有登录加类 'islogin' -->
        <div class='haslogin flex-box'>
          <span class='avatar-img'>
            <a href='personalInfo.html'><img :src='userInfo.content.picUrl' alt=''></a></span>
          <div class='my-name has-perfect'><!--已完善资料加类 'has-perfect'-->
            <a href='personalInfo.html'>
              <h2 v-cloak>{{ userInfo.content.name }}</h2>
              <p>完善资料送200积分<i class='right-icon'></i></p>
              <span>{{ userInfo.content.memberLevel }}</span>
            </a>
          </div>
          <router-link to="/signdaily"><a class='my-checkIn'><span>签到<i></i></span></a></router-link>

        </div>
        <a class='nologin flex-box'>
          <span class='avatar-img'><img src='../../assets/image/membercenter/avatar.jpg' alt=''></span>
          <div>登录/注册<img src='../../assets/image/membercenter/registered-offer.png' width='90' height='17'></div>
        </a>
      </div>
      <div class='my-offer'>
        <div><router-link to="/scorerecord"><a>积分：<span>{{ userInfo.content.points }}</span></a></router-link></div>
        <div><router-link to="/mycoupon"><a>优惠券：<span>{{ userInfo.content.coupon }}</span></a></router-link></div>
      </div>
      <div class='my-order'>
        <a href='#'>
          <span><i class='pending-pay-icon'></i><em v-if="parseInt(userInfo.content.waitingToPay) != 0" v-cloak>{{ userInfo.content.waitingToPay }}</em></span>
          <p>待付款</p>
        </a>
        <a href='#'>
          <span><i class='to-travel-icon'></i><em v-if="parseInt(userInfo.content.perpareToTravel) != 0" v-cloak>{{ userInfo.content.perpareToTravel }}</em></span>
          <p>待出行</p>
        </a>
        <a href='#' class='my-order-arrow'>
          <span><i class='be-evaluated-icon'></i><em v-if="parseInt(userInfo.content.waitingToComment) != 0" v-cloak>{{ userInfo.content.waitingToComment }}</em></span>
          <p>待评价</p>
        </a>
        <router-link to="/MyOrder">
          <span><i class='my-order-icon'></i></span>
          <p>我的订单</p>
        </router-link>
      </div>
      <ul class='my-nav'>
        <li v-if="[1, 2].indexOf(parseInt(userInfo.content.iconMapAlert.myFavorite.status))!=-1"
            :class="[parseInt(userInfo.content.iconMapAlert.myFavorite.status)==2 ? 'gray' : '']"
            @click="toMemberFuncPage" :func-status="userInfo.content.iconMapAlert.myFavorite.status"
            :func-tips="userInfo.content.iconMapAlert.myFavorite.tips" v-cloak go-to='MyCollection'>
          <a>
            <i class='my-collection-icon'></i>
            <p>我的收藏</p>
          </a>
        </li>
        <li v-if="[1, 2].indexOf(parseInt(userInfo.content.iconMapAlert.myRecord.status))!=-1"
            :class="[parseInt(userInfo.content.iconMapAlert.myRecord.status)==2 ? 'gray' : '']"
            @click="toMemberFuncPage" :func-status="userInfo.content.iconMapAlert.myFavorite.status"
            :func-tips="userInfo.content.iconMapAlert.myFavorite.tips" v-cloak>
          <a>
            <i class='my-browse-icon'></i>
            <p>浏览记录</p>
          </a>
        </li>
        <li v-if="[1, 2].indexOf(parseInt(userInfo.content.iconMapAlert.myCard.status))!=-1"
            :class="[parseInt(userInfo.content.iconMapAlert.myCard.status)==2 ? 'gray' : '']" @click="toMemberFuncPage"
            :func-status="userInfo.content.iconMapAlert.myCard.status"
            :func-tips="userInfo.content.iconMapAlert.myCard.tips"
            go-to="mycard"
            v-cloak>
          <a>
            <i class='my-card-icon'></i>
            <p>自游通卡</p>
          </a>
        </li>
        <li v-if="[1, 2].indexOf(parseInt(userInfo.content.iconMapAlert.myInformation.status))!=-1"
            :class="[parseInt(userInfo.content.iconMapAlert.myInformation.status)==2 ? 'gray' : '']"
            @click="toMemberFuncPage" :func-status="userInfo.content.iconMapAlert.myInformation.status"
            :func-tips="userInfo.content.iconMapAlert.myInformation.tips" v-cloak>
          <a>
            <i class='my-common-icon'></i>
            <p>常用信息</p>
          </a>
        </li>
        <li v-if="[1, 2].indexOf(parseInt(userInfo.content.iconMapAlert.myRecommend.status))!=-1"
            :class="[parseInt(userInfo.content.iconMapAlert.myRecommend.status)==2 ? 'gray' : '']"
            @click="toMemberFuncPage" :func-status="userInfo.content.iconMapAlert.myRecommend.status"
            :func-tips="userInfo.content.iconMapAlert.myRecommend.tips" v-cloak>
          <a>
            <i class='polite-icon'></i>
            <p>推荐有礼</p>
          </a>
        </li>
        <li v-if="[1, 2].indexOf(parseInt(userInfo.content.iconMapAlert.myIntegral.status))!=-1"
            :class="[parseInt(userInfo.content.iconMapAlert.myIntegral.status)==2 ? 'gray' : '']"
            @click="toMemberFuncPage" :func-status="userInfo.content.iconMapAlert.myIntegral.status"
            :func-tips="userInfo.content.iconMapAlert.myIntegral.tips" v-cloak>
          <a>
            <i class='mall-icon'></i>
            <p>积分商城</p>
          </a>
        </li>
        <li v-if="[1, 2].indexOf(parseInt(userInfo.content.iconMapAlert.myCounselor.status))!=-1"
            :class="[parseInt(userInfo.content.iconMapAlert.myCounselor.status)==2 ? 'gray' : '']"
            @click="toMemberFuncPage" :func-status="userInfo.content.iconMapAlert.myCounselor.status"
            :func-tips="userInfo.content.iconMapAlert.myCounselor.tips"
            :go-to="consultantIsBind.resultMsg == 'success'?'tripConsultant/'+consultantIsBind.content : 'tripConsultantBind'"
            v-cloak>
          <a>
            <i class='consultant-icon'></i>
            <p>专属顾问</p>
          </a>
        </li>
        <li v-if="[1, 2].indexOf(parseInt(userInfo.content.iconMapAlert.myEnterprise.status))!=-1"
            :class="[parseInt(userInfo.content.iconMapAlert.myEnterprise.status)==2 ? 'gray' : '']"
            @click="toMemberFuncPage" :func-status="userInfo.content.iconMapAlert.myEnterprise.status"
            :func-tips="userInfo.content.iconMapAlert.myEnterprise.tips" v-cloak>
          <a>
            <i class='client-icon'></i>
            <p>企业客户</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import common from '../../assets/js/common'
  import weui from 'weui.js'

  export default {
    data () {
      return {
        userInfo: {
          'resultCode': '',
          'resultMsg': '',
          'content': {
            'userId': '',
            'memberId': '',
            'headImageUrl': '',
            'points': '',
            'coupon': '',
            'allOrder': '',
            'waitingToPay': '0',
            'perpareToTravel': '0',
            'waitingToComment': '0',
            'name': '',
            'memberLevel': '',
            'userSurName': '',
            'userName': '',
            'email': null,
            'address': null,
            'myRecommendCode': '',
            'recommendCode': '',
            'picUrl': '',
            'userImageId': '',
            'mobileNo': '',
            'iconMap': {
              'myCounselor': false,
              'myEnterprise': false,
              'myIntegral': false,
              'myRecord': false,
              'myFavorite': false,
              'myInformation': false,
              'myRecommend': false,
              'myCard': false
            },
            'iconMapAlert': {
              'myCounselor': {
                'status': '',
                'tips': ''
              },
              'myEnterprise': {
                'status': '',
                'tips': ''
              },
              'myIntegral': {
                'status': '',
                'tips': ''
              },
              'myRecord': {
                'status': '',
                'tips': ''
              },
              'myFavorite': {
                'status': '',
                'tips': ''
              },
              'myInformation': {
                'status': '',
                'tips': ''
              },
              'myRecommend': {
                'status': '',
                'tips': ''
              },
              'myCard': {
                'status': '',
                'tips': ''
              }
            },
            'registerPoint': ''
          },
          'accessToken': null
        },
        consultantIsBind: {
          'resultCode': '',
          'resultMsg': '',
          'content': '',
          'accessToken': null
        },
        noReadMsg: {
          'resultCode': '',
          'resultMsg': '',
          'content': {
            'allCount': 0,
            'teamMessage': 0,
            'orderMessage': 0,
            'sysMessage': 0
          },
          'accessToken': null
        }
      }
    },
    created: function () {
      var self = this
      var userId = common.userid
      var queryUrl = common.api.memberCenter.getMemberInfo
      var config = {
        headers: {
          'access-token': common.accesstoken,
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }
      var data = qs.stringify({
        userId: userId
      })
      axios.post(queryUrl, data, config).then(function (res) {
        self.userInfo = res.data
      })
      self.isTripConsultantBind()
      self.getNoReadMsg()
    },
    methods: {
      toMemberFuncPage: function (e) {
        var eStatus = e.currentTarget.getAttribute('func-status')
        var eTips = e.currentTarget.getAttribute('func-tips')
        var eRouter = e.currentTarget.getAttribute('go-to')
        var self = this
        if (parseInt(eStatus) === 2) {
          weui.alert(eTips)
        } else {
          self.$router.push('/' + eRouter)
        }
      },
      isTripConsultantBind: function () {
        // 专属顾问是否已绑
        var self = this
        var queryUrl = common.api.memberCenter.isTripConsultantBind
        var config = {
          headers: {
            'access-token': common.accesstoken,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        var data = qs.stringify({
          userId: '1-QOQ3GF'
        })
        var loading = weui.loading('加载中')
        axios.post(queryUrl, data, config).then(function (res) {
          if (res.data.resultMsg === 'success') {
            self.consultantIsBind = res.data
            loading.hide()
          } else {
            loading.hide()
          }
        })
      },
      getNoReadMsg: function () {
        // 未读消息
        var self = this
        var queryUrl = common.api.memberCenter.getNoReadMessageNum
        var config = {
          headers: {
            'access-token': common.accesstoken,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        var data = qs.stringify({
          userId: common.userid
        })
        var loading = weui.loading('加载中')
        axios.post(queryUrl, data, config).then(function (res) {
          if (res.data.resultMsg === 'success') {
            self.noReadMsg = res.data
            console.log(self.noReadMsg.content)
            loading.hide()
          } else {
            loading.hide()
            weui.toast('请求失败')
          }
        })
      }
    }
  }
</script>

<style lang='scss'>
  @import '../../assets/sass/member/member.scss';
</style>
